<template>
    <div>
        <el-drawer :model-value="visible" title="项目信息" size="500px" @close="closeHandle" @closed="closed">
            <div class="demo-drawer__content">
                <el-form :model="form" ref="formRef" label-position="right">
                    <el-form-item :label-width="formLabelWidth" label="姓名" required>
                        <el-input v-model="form.name" placeholder="请输入" autocomplete="off" />
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="手机号码" required>
                        <el-input v-model="form.mobile" placeholder="请输入" autocomplete="off" />
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth" label="微信" required>
                        <el-input v-model="form.wx" placeholder="请输入" autocomplete="off" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <el-space>
                    <el-button type="info" plain :loading="loading" @click="cancelHandle">取消</el-button>
                    <el-button type="primary" :loading="loading" @click="confirmHandle">提交保存</el-button>
                </el-space>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { reactive, ref, computed } from "vue"
import { addSupplier } from "@/api/supplier.js"
import { toast } from "@/hook/toast";
import { delay } from "@/utils";

const formRef = ref(null)
const emits = defineEmits(['update:modelValue', 'addSuccess'])
const form = reactive({
    name: '',
    mobile: '',
    wx: '',
    gongyingshang_id: '',
})
const formLabelWidth = '80px'
const loading = ref(false);
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true,
    }
})
const visible = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        console.log(value, '属性')
        emits('update:modelValue', value)
    }
})
// 关闭组件
function closed() {
    resetForm()
}

const closeHandle = () => {
    visible.value = false
};
const cancelHandle = () => {
    visible.value = false
}

function editHandle(row) {
    visible.value = true
    const { id, wx, name, mobile } = row
    form.name = name
    form.wx = wx
    form.mobile = mobile
    form.gongyingshang_id = id
}

// 编辑
defineExpose({
    editHandle,
})

// 提交保存
function confirmHandle() {
    formRef.value.validate(async flag => {
        if (!flag) return
        loading.value = true
        const { name, mobile, wx, gongyingshang_id } = form
        const payload = {
            name, mobile, wx, gongyingshang_id
        }
        console.log(payload)
        const resp = await accountList(payload)
        console.log(resp, '返回的数据');
        const { code, msg } = resp
        await delay(200)
        toast({ title: msg })
        loading.value = false
        if (code !== 1) return
        triggerUpdate()
    })
}

// 清空数组 并关闭
function resetForm() {
    form.gongyingshang_id = ''
    form.mobile = ''
    form.name = ''
    form.wx = ''
    formRef.value.resetFields()
}

function triggerUpdate() {
    emits('addSuccess')
    resetForm()
    visible.value = false
}

</script>
<style></style>
